<template>
  <view class="">
    <view class="bg-white mb-12 py-28">
      <view class="user-avatar mx-auto flex-ca">
        <image v-if="user.headimgurl" class="user-avatarImg" :src="user.headimgurl" mode="" />
        <view v-else class="iconfont icon-upload-img" />
      </view>
    </view>
    <view class="">
      <view class="menu-item ">
        <view class="menu-label">昵称</view>
        <view class="menu-main">{{ user.nickname }}</view>
        <view class="iconfont icon-right" />
      </view>
      <view class="menu-item hair--y">
        <view class="menu-label">绑定手机</view>
        <view v-if="user.phone" class="menu-main flex-b">
          <view class="text-info">{{ user.phone }}</view>
          <view class="text-primary" @click="goBind()">更换绑定手机</view>
        </view>
        <view v-else class="menu-main flex-b">
          <view class="text-info">暂无绑定</view>
          <view class="text-primary" @click="goBind()">绑定手机</view>
        </view>
        <view class="iconfont icon-right" />
      </view>
      <view class="menu-item" @click="customVisible = true">
        <view class="menu-label">我的兴趣</view>
        <view class="menu-main" />
        <view class="iconfont icon-right" />
      </view>
    </view>
		
    <user-custom :visible.sync="customVisible" />
  </view>
</template>

<script>
import UserCustom from '@/components/User/Custom'
export default {
  components: {
    UserCustom
  },
  data() {
    return {
      customVisible: false
    }
  },
  computed: {
    user() {
      return this.$store.state.userInfo
    }
  },
  methods: {
    goBind() {
      this.$Router.push('/pages/login/bind')
    }
  }
}
</script>

<style lang="scss">
	.user-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: #E7ECF2;
		.icon-upload-img {
			color: #8493A6;
			font-size: 60rpx;
		}
	}
	.user-avatarImg {
		display: block;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}
	.menu-item {
		display: flex;
		align-items: center;
		height: 96rpx;
		line-height: 40rpx;
		padding: 0 28rpx;
		background-color: #fff;
		.icon-right {
			font-size: 28rpx;
			color: #8493A6;
		}
	}
	.menu-label {
		min-width: 140rpx;
	}
	.menu-main {
		flex: 1;
		padding-right: 10rpx;
	}
</style>
